<template>
    <div >
      <div>
        请选择随机号：<el-select v-model="randomn" placeholder="请选择" @change="hoschange()">
                    <el-option
                      v-for="item in randomnArr"
                      :key="item.id"
                      :label="item.random_num"
                      :value="item.id">
                    </el-option>
                  
                  </el-select>
                  <el-button type="primary" @click="printing()">打印</el-button>
      </div>
      <div>
        <el-table
            :data="randomTant"
            style="width: 100%"
            border
            height="250">
            <el-table-column
              fixed
              prop="suname"
              label="姓名"
              width="100">
            </el-table-column>
            <el-table-column
              prop="ppname"
              label="采血点"
              width="200"
             >
            </el-table-column>
            <el-table-column
              prop="auth"
              label="采血认证"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="name"
              label="接收房间"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="receive_date"
              label="接收时间"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="transport"
              label="转运人"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="receive_authentication"
              label="接收认证"
              width="200"

              >
            </el-table-column>
            
            <el-table-column
              prop="dename"
              label="离心设备"
              width="200"
              >
            </el-table-column>
             <el-table-column
              prop="centrifuge_date"
              label="离心开始时间"
              width="200"
              >
            </el-table-column>
             <el-table-column
              prop="centrifuge_end_date"
              label="离心结束时间"
              width="200"
              >
            </el-table-column>
            <el-table-column
              label="是否溶血"
              width="200"
              >
               <template  slot-scope="scope">
                <div >
                    <div v-if='scope.row.hemolysis==2'>
                      是
                    </div>
                    <div  v-if='scope.row.hemolysis==1'>
                      否
                    </div>
                </div>
                    
                </template>
            </el-table-column>
             <el-table-column
              prop="centrifuge_authentication"
              label="离心认证"
              width="200"
              >
            </el-table-column>
          <el-table-column
              prop="split_date"
              label="分装时间"
              width="200"
             >
            </el-table-column>
            <el-table-column
              prop="split_authentication"
              label="分装认证"
              width="200"
             >
            </el-table-column>
            <el-table-column
              prop="d1name"
              label="分血A管冻存"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="adate"
              label="A管冻存时间"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="d2name"
              label="分血B管冻存"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="bdate"
              label="B管冻存时间"
              width="200"

              >
            </el-table-column>
            <el-table-column
              prop="storage_authentication"
              label="冻存认证"
              width="200"

              >
            </el-table-column>
            
            
            
           
           
          </el-table>
      </div>
          <div style="clear: both"></div>
            <div id="printTarget" v-show="false" style="width: 100%;">
            <table style="width: 100%;border-collapse: collapse;font-size: 15px">
              <thead style="display:table-header-group; " class="theadD">
                <tr style="width: 100%">
                  <td >项目名称：</td>
                  <td style="border-bottom: 1px solid #000;" >{{projectName}}</td>
                </tr>
                <tr style="height: 30px">
                  <td >方案编号：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{num}}</td>
                  <td style="height: 30px;width: 25%">受试者随机号：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{randomNum}}</td>
                </tr>
                <tr style="height: 30px">
                  <td>主要研究者：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000;">{{bidder}}</td>
                  <td>申办方/CRO：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{bidder}}</td>
                </tr>
               
                
                <td height="20px"></td>
            </thead>
            </table>
              <table style="width: 100%;border-collapse: collapse;font-size: 15px">
              
                    <tbody>
                        <tr  style="border: 1px solid #000">
                          <td align="center" style="border-right: 1px solid #000;">采血点</td>
                          
                          <td align="center" style="border-right: 1px solid #000;">
                            姓名
                          </td>
                          <td align="center" style="border-right: 1px solid #000;">接收房间</td>
                          <td align="center" style="border-right: 1px solid #000;">
                            接收时间
                          </td>
                          <td align="center" style="border-right: 1px solid #000;">离心机</td>
                          <td align="center" style="border-right: 1px solid #000;">离心时间 </td>
                          <td align="center" style="border-right: 1px solid #000;">分装时间 </td>
                          <td align="center" style="border-right: 1px solid #000;">分装A管 </td>
                          <td align="center" style="border-right: 1px solid #000;">A管存放时间 </td>
                          <td align="center" style="border-right: 1px solid #000;">分装B管 </td>
                          <td align="center" style="border-right: 1px solid #000;">B管存放时间 </td>

                        </tr>
                        <tr v-for="item in randomTant" style="border: 1px solid #000">
                          <td align="center" style="border-right: 1px solid #000;">{{item.ppname}}</td>
                          
                          <td align="center" style="border-right: 1px solid #000;">
                            {{item.suname}}
                          </td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.name}}</td>
                          <td align="center" style="border-right: 1px solid #000;">
                            {{item.receive_date}}
                          </td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.dename}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.centrifuge_date}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.split_date}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.d1name}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.adate}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.d2name}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.bdate}}</td>

                        </tr>
                    </tbody>
                   
                </table>
              <!-- </div> -->
            </div>


    </div>
</template>

<script>
  import http from '../../../api/http'

  export default {
    name: 'hello',
    data () {
      return {
        randomn:'',
        randomnArr:[],
        randomTant:[],
        itmeList:[],
        nameP:'',
        randomsj:'',
        projectInformation:null,
        projectName:'',
        num:'',
        bidder:'',
        randomNum:'',

      }
    },

    methods: {
      comeOn(){
        var vm = this;
        if (vm.$utils.getCurrenrProject().id == null) {
          vm.$notify({title: '操作提示', message: '请选择项目', type: 'error'});
        }
        http.postData(vm,'/pt/qrBarCodeValide/getSubject',{id:vm.$utils.getCurrenrProject().id},function (resp) {
          // console.log(resp.body)
          vm.randomnArr=resp.body;

        })
      },
      hoschange(){
        var vm = this;
        http.postData(vm,'/pt/qrBarCodeValide/getSubjectSample',{id:vm.randomn},function (resp) {
          // console.log(resp.body)
          vm.randomTant=resp.body;

        })
        
      },
      printing(){
         var vm=this;
        if (vm.$utils.getCurrenrProject().id == null) {
          vm.$notify({title: '操作提示', message: '请选择项目', type: 'error'});
          return;
        }
        vm.projectInformation = null;

        http.postData(vm, '/pt/subjects/queryProSite/'+vm.randomn, {}, function (resp) {
            var ret = resp.body;
            // console.log(ret);
            if (ret.code == 111) {
              vm.projectName=ret.value[0].projectName;
              vm.randomNum=ret.value[0].randomNum;
              vm.num=ret.value[0].num;
              vm.bidder=ret.value[0].bidder;
              setTimeout(function () {
                var printHtml = vm.$el.querySelector("#printTarget").innerHTML;
                var wid = window.open('blank', '_blank', 'width=200px;');
                wid.document.write(printHtml);
                setTimeout(function () {
                  wid.print();
                  wid.close();
                }, 1000);
              }, 500);
            }else{
              if (vm.randomn == '') {
                  vm.$notify({title: '操作提示', message: '请选择随机号', type: 'error'});
                  return;
                }
            }
          })
      }
     
     
    },
    mounted(){
      this.comeOn();
      


    }
  }
  </script>
<style scoped>
.oneChart{
  width:900px;
  border:1px solid #79c4a5;
  margin: 0 auto;
  margin-top: 20px;
}
.theadD td{
  width:100px;
}
</style>
